<template>
  <div class="page-subpackage">
    <!-- <template #header> 分包 </template> -->
    <!-- card body -->
    <el-input v-model="search" placeholder="请输入人员名称" clearable @input="searchKeyperson">
      <template #append>
        <el-button type="primary" size="default" @click="openFile">
          <TableFile theme="outline" size="15" fill="#333" />
        </el-button>
      </template>
    </el-input>
    <!-- {{ subpackages }} -->
    <div class="overflow-y-auto">
      <div v-for="value in tableValue" :key="value.id" class="sub-item">
        <div class="left">
          <div class="scon" :class="{ laowu: value.gongxu.includes('劳务') }">
            <wind-turbine
              theme="outline"
              size="16"
              fill="#333"
              v-if="value.gongxu.includes('专业')"
            />
            <Spanner theme="outline" size="16" fill="#333" v-if="value.gongxu.includes('劳务')" />
          </div>
          <div>
            <div class="name">
              {{ value.name }}
              <div
                class="bg-red-400 text-white py-0.5 px-1.5 text-xs mr-2 rounded"
                v-if="value.remark"
              >
                {{ value.remark }}
              </div>
            </div>
            <div class="comp">{{ value.compName }}</div>
          </div>
        </div>
        <div class="right">
          <!-- <div></div> -->
          <!-- <Spanner theme="outline" size="24" fill="#333" /> -->
          <!-- <div> -->
          <div class="gongxu">{{ value.gongxu }}</div>
          <div class="zhiwu">{{ value.zhiwu }}</div>
          <!-- </div> -->
        </div>
      </div>
    </div>
    <!-- {{ tableValue }} -->
  </div>
</template>

<script lang="ts" setup>
import { Spanner, TableFile, WindTurbine } from '@icon-park/vue-next'
import useComp from '@renderer/composables/useComp'
import useSubpackage from '@renderer/composables/useSubpackage'
import { ref } from 'vue'

const { all: allSubpackage, subpackages } = useSubpackage()
const { find: findComp, comp } = useComp()
const search = ref('')
const tableValue = ref<KeyPersonModel[]>([])

const openFile = () => {
  window.api.open()
}

const searchKeyperson = async () => {
  const lst_subpackage = subpackages.value.filter((sub) => sub.name.includes(search.value))
  if (search.value) {
    tableValue.value = lst_subpackage
    for await (const v of tableValue.value) {
      await findComp(v.compId)
      v.compName = comp.value!.name
    }
  } else {
    tableValue.value = []
  }
}

allSubpackage()
</script>

<style lang="scss" scoped>
.page-subpackage {
  @apply h-screen px-2 py-5 bg-white;
  display: grid;
  grid-template-rows: auto 1fr;
  .sub-item {
    @apply my-2 bg-[#2F4F4F] flex justify-between items-center p-2 rounded-sm;
    .left {
      @apply text-gray-300 flex gap-4 items-center;
      .scon {
        @apply m-1 bg-[#1D8A99] rounded p-2;
        &.laowu {
          @apply bg-[#E06D10];
        }
      }
      .name {
        @apply flex items-center gap-3;
      }
      .comp {
        @apply text-xs opacity-90;
      }
    }
    .right {
      @apply text-gray-200 flex flex-col items-end;
      .gongxu {
      }
      .zhiwu {
        @apply text-xs opacity-90;
      }
    }
  }
}
</style>
